<template>
  <div class="group mt-8 px-2">
    <h3
      v-once
      id="highlights-headline"
      v-i-tooltip.right="
        $t('core::app.highlights.refresh_interval', { interval: 10 })
      "
      class="hidden px-3 text-xs font-medium uppercase tracking-wider text-neutral-50 group-hover:inline-flex group-hover:items-center"
    >
      <Icon icon="QuestionMarkCircle" class="mr-2 h-5 w-5 text-current"></Icon>
      {{ $t('core::app.highlights.highlights') }}
    </h3>

    <div
      class="mt-1 space-y-1"
      role="group"
      aria-labelledby="highlights-headline"
    >
      <RouterLink
        v-for="highlight in highlights"
        :key="highlight.name"
        v-memo="[highlight.count]"
        class="group flex items-center rounded-md px-3 py-2 text-sm font-medium text-neutral-50 hover:bg-neutral-600"
        :to="highlight.route"
      >
        <span
          :class="[
            highlight.count > 0
              ? getBackgroundColorClass(highlight)
              : 'bg-success-500',
            'mr-4 h-2.5 w-2.5 rounded-full',
          ]"
          aria-hidden="true"
        />

        <span class="mr-1 truncate" v-text="highlight.name"></span>
        ({{ highlight.count }})
      </RouterLink>
    </div>
  </div>
</template>

<script setup>
import { onBeforeUnmount, onMounted, shallowRef } from 'vue'

import { useApp } from '../composables/useApp'

const { scriptConfig } = useApp()

const highlights = shallowRef(scriptConfig('highlights'))

let intervalId = null

function fetch() {
  Innoclapps.request('/highlights').then(({ data }) => {
    highlights.value = data
  })
}

function getBackgroundColorClass(highlight) {
  if (highlight.backgroundColorVariant === 'warning') return 'bg-warning-500'
  if (highlight.backgroundColorVariant === 'danger') return 'bg-danger-500'
  if (highlight.backgroundColorVariant === 'info') return 'bg-info-500'
  if (highlight.backgroundColorVariant === 'primary') return 'bg-primary-500'
  if (highlight.backgroundColorVariant === 'neutral') return 'bg-neutral-500'
}

onMounted(() => {
  intervalId = setInterval(fetch, 1000 * 60 * 10)
})

onBeforeUnmount(() => {
  clearInterval(intervalId)
})
</script>
